<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>活动报名-报名情况</title>

    <link rel="stylesheet" href="${rc.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${rc.contextPath}/statics/plugins/bootstrap-table/bootstrap-table.css">
    <link rel="stylesheet" href="${rc.contextPath}/statics/plugins/bootstrap-table/bootstrap-editable.css">
    <script src="${rc.contextPath}/statics/libs/jquery.min.js"></script>
    <script src="${rc.contextPath}/statics/libs/vue.min.js"></script>
    <script src="${rc.contextPath}/statics/plugins/bootstrap-table/bootstrap.js"></script>
    <script src="${rc.contextPath}/statics/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${rc.contextPath}/statics/plugins/bootstrap-table/bootstrap-table-export.js"></script>
    <script src="${rc.contextPath}/statics/plugins/bootstrap-table/bootstrap-table-zh-CN.js"></script>
    <script src="${rc.contextPath}/statics/plugins/bootstrap-table/tableExport.js"></script>
    <script src="${rc.contextPath}/statics/plugins/laydate/laydate.js"></script>
    <script src="${rc.contextPath}/statics/plugins/bootstrap-table/bootstrap-editable.js"></script>
    <script src="${rc.contextPath}/statics/plugins/bootstrap-table/bootstrap-table-editable.js"></script>

    <script>
        var vm;
        $(function () {
            var currentDate = new Date();

            var dateStr = currentDate.getFullYear() + "-" + (currentDate.getMonth() + 1) + "-" + currentDate.getDate();
            $("#startDate").val(dateStr);
            $("#endDate").val(dateStr);

            initTable();

            vm = new Vue({
                el: "#search",
                data: {
                    comeLate: 0,
                    leaveEarly: 0,
                    allStuCount: 0,
                    inSchool: 0,
                    selectedInSchool: "",
                    selectedComeLate: "",
                    selectedLeaveEarly: "",

                    selectedClazzId: "",
                    clazzes: []
                },
                methods: {}


            });


            $.get("../generalclass/getByRole", function (r) {
                vm.clazzes = JSON.parse(r).data;
            });

        });


        function initDate() {
            var start = {
                elem: "#startDate",
                //elem: startSelector,
                format: "YYYY-MM-DD ",
                istoday: true,
                festival: true, //显示节日
                choose: function (datas) {
                    end.min = datas; //开始日选好后，重置结束日的最小日期
                    end.start = datas //将结束日的初始值设定为开始日
                }
            }

            var end = {
                elem: "#endDate",
                //elem :endSelector,
                format: 'YYYY-MM-DD',
                festival: true, //显示节日
                //min: laydate.now(),
                //istime: true,
                istoday: true,
                choose: function (datas) {
                    start.max = datas; //结束日选好后，重置开始日的最大日期
                }
            }

            laydate(start);
            laydate(end);
        }


        function initTable() {
//            $.get("/eboardStatistic/getEboardStatistics", {stuCardRecord: stuCardRecord}, function (result) {


            //先销毁表格
            $('#myTable').bootstrapTable('destroy');

            $("#myTable").bootstrapTable({
                url: "../eboardStatistic/test",
                method: 'get',  // 必须用get，不然后台获取不到参数
                dataType: 'json',
                //  data: result,
                toolbar: '#toolbar',                //工具按钮用哪个容器
                checkboxHeader: true,
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，
                //strictSearch: true,
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                //minimumCountColumns: 10,             //当列数小于此值时，将隐藏内容列下拉框。
                clickToSelect: true,                //是否启用点击选中行
                // height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                // uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                showExport: true,                     //是否显示导出
                exportDataType: "all",              //basic', 'all', 'selected'.
                queryParams: function queryParams(params) {
                    return {
                        limit: params.limit,
                        offset: params.offset,
                        search: params.search,
                        sort: params.sort,
                        order: params.order,

                        inSchool: $("#inSchool option:selected").val(),
                        comeLate: $("#comeLate option:selected").val(),
                        leaveEarly: $("#leaveEarly option:selected").val(),
                        startDate: $("#startDate").val(),
                        endDate: $("#endDate").val(),
                        classId: $("#classId option:selected").val(),
                    }
                    /*
                    var eboardStatistic = {    // 变量名必须和controller处的变量名一致
                         pageSize: params.limit,   //页面大小
                         pageNumber: params.pageNumber,  //页码
                        //sort: params.sort,  //排序列名
                        //sortOrder: params.order//排位命令（desc，asc）
                        //    inSchool: vm.selectedInSchool,
                        inSchool: $("#inSchool option:selected").val(),
                        comeLate: $("#comeLate option:selected").val(),
//                        comeLate: vm.selectedComeLate,
                        leaveEarly: $("#leaveEarly option:selected").val(),
//                        leaveEarly : vm.selectedLeaveEarly,
                        //classId: $("#classId option:selected").val(),
                        startDate: $("#startDate").val(),
                        endDate: $("#endDate").val(),
//                        classId: vm.selectedClazzId
                        //  campusId: $("#campusId option:selected").val(),
                        // gradeId: $("#gradeId option:selected").val(),
                        classId: $("#classId option:selected").val(),
                        //activityId: $("#activityId option:selected").val(),
                    };
                    */

                    //return eboardStatistic;
                },
                responseHandler:responseHandler,//请求数据成功后，渲染表格前的方法
                onLoadSuccess: function (result) {  //加载成功时执行

                    var otherData = result.otherData;
                    vm.inSchool = otherData.inSchoolCount;
                    vm.leaveEarly = otherData.leaveEarlyCount;
                    vm.comeLate = otherData.comeLateCount;
                    vm.allStuCount = otherData.allCount;
                },

                columns: [
                    /*
                     {
                     checkbox: true,
                     align: 'center',
                     valign: 'middle'
                     },
                     */
                    {
                        field: 'stuNo',
                        title: '学生身份证号',
                        align: 'center',
                        valign: 'middle',
                        sortale: true,

                    }, {
                        field: 'stuName',
                        title: '学生姓名',
                        align: 'center',
                        valign: 'middle',
                        sortale: true
                    }, {
                        field: 'className',
                        title: '班级',
                        align: 'center',
                        valign: 'middle',
                        sortale: true
                    }, {
                        field: 'checkInTime',
                        title: '签到时间',
                        align: 'center',
                        valign: 'middle',
                        //   formatter: function (value, row, index) {
                        //      return index+1;
                        // }
                    },
                    {
                        field: 'checkOutTime',
                        title: '签退时间',
                        align: 'center',
                        valign: 'middle',
                    }, {
                        field: 'comeLate',
                        title: '是否迟到',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        formatter: function (value, row, index) {
                            if (value) {
                                return "是"
                            } else {
                                return "否"
                            }

                        }

                    }, {
                        field: 'leaveEarly',
                        title: '是否早退',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        formatter: function (value, row, index) {
                            if (value) {
                                return "是"
                            } else {
                                return "否"
                            }
                        }
                    }, {
                        field: 'inSchool',
                        title: '是否在校',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        formatter: function (value, row, index) {
                            if (value) {
                                return "是";
                            } else {
                                return "否"
                            }
                        }
                    }
                ],

            });

            // });
        }

        function responseHandler(result){
            var errcode = result.status;//在此做了错误代码的判断
            if(errcode === "1"){
                alert("错误代码" + errcode);
                return;
            }
            //如果没有错误则返回数据，渲染表格
            return {
                total : result.total, //总页数,前面的key必须为"total"
                data : result.data //行数据，前面的key要与之前设置的dataField的值一致.
            };
        };

        /**
         * 按条件查询
         */
        function doQuery() {
            $("#myTable").bootstrapTable('refresh');
        }

        function booleanFormatter(val) {
            if (val)
                return "是";
            else
                return "否";
        }


        function rowStyle(row, index) {
            var classes = ['active', 'success', 'info', 'warning', 'danger'];

            if (index % 2 === 0 && index / 2 < classes.length) {
                return {
                    classes: classes[index / 2]
                };
            }
            return {};
        }


    </script>
</head>
<body>
<div class="container" id="search">
    <div class=" row base-margin" id="query">

        <form class="form-horizontal" role="form" style="float: left; width: 100%" method="post" id="queryForm">
            <div class="form-group">
                <label class="col-md-1 control-label">所属班级</label>
                <div class="col-md-2">
                    <select class="form-control" id="classId" v-model="selectedClazzId">
                        <option value="">所有</option>
                        <option v-for="clazz in clazzes" :value="clazz.id">{{clazz.name}}</option>
                    </select>
                </div>

                <label for="inSchool" class="control-label col-md-1">是否在校</label>
                <div class="col-md-2">
                    <select name="inSchool" class="form-control" id="inSchool">
                        <option value="" selected>所有</option>
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                </div>
                <label for="comeLate" class="control-label col-md-1">是否迟到</label>
                <div class="col-md-2">
                    <select name="comeLate" class="form-control" id="comeLate">
                        <option value="" selected>所有</option>
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                </div>

                <label for="leaveEarly" class="control-label col-md-1">是否早退</label>
                <div class="col-md-2">
                    <select name="leaveEarly" class="form-control" id="leaveEarly">
                        <option value="" selected>所有</option>
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                </div>

            </div>


            <div class="form-group ">
                <label for="startDate" class="control-label col-md-1">开始日期</label>
                <div class="col-md-2">
                    <input placeholder="开始日期" type="text" onclick="laydate()" class="form-control " id="startDate"
                           name="startDate">
                </div>

                <label for="endDate" class="control-label col-md-1">结束日期</label>
                <div class="col-md-2">
                    <input placeholder="结束日期" type="text" onclick="laydate()" class="form-control" id="endDate"
                           name="endDate">
                </div>

                <div class="col-md-1">
                    <button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查询</button>
                </div>
            </div>


            <p>
                应到 ：{{allStuCount}}人&nbsp;&nbsp;&nbsp;&nbsp;实到 ：{{inSchool}}人<br>
                迟到 ：{{comeLate}}人<br>
                早退 ：{{leaveEarly}}人<br>
            </p>
        </form>
    </div>
</div>


<div class="container">
    <table id="myTable"></table>
</div>

</body>
</html>



